<template class="body">
  <el-card shadow="never" class="aui-card--fill">
    <template>
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-input v-model="businessName" placeholder="商家名关键字模糊搜索" clearable
                    @keyup.enter.native="getBusinessLikeName()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="businessList"
          style="width: 100%"
          v-loading="loading">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商家ID">
                <span>{{ props.row.businessId }}</span>
              </el-form-item>
              <el-form-item label="店名">
                <span>{{ props.row.businessName }}</span>
              </el-form-item>
              <el-form-item label="商家图片" @click="updateBusinessPic()">
                <img :src=" (props.row.businessPic)" class="avatar" style="width: 100px; height: 100px">
              </el-form-item>
              <el-form-item label="商家地址">
                <span>{{ props.row.businessAddress }}</span>
              </el-form-item>
              <el-form-item label="商家电话">
                <span>{{ props.row.businessTel }}</span>
              </el-form-item>
              <el-button type="text" @click="goodsList(props.row.businessId)">在售商品</el-button>
              <el-drawer
                  title="在售商品"
                  :visible.sync="table"
                  direction="rtl"
                  size="50%">
                <el-table :data="goodData">
                  <el-table-column property="goodsName" label="商品名称" width="200"></el-table-column>
                  <el-table-column property="goodsDescription" label="商品描述"></el-table-column>
                  <el-table-column property="category.categoryName" label="商品分类"></el-table-column>
                  <el-table-column property="goodsPic" label="商品图片" width="150">
                    <template slot-scope="scope">
                      <el-image style="width: 100px; height: 100px" :src=" (scope.row.goodsPic)"
                      >
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="right">
                    <template slot="header" slot-scope="scope">
                      <el-button type="success" @click="goodDrawer = true">添加商品</el-button>
                    </template>
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click="updateGood(scope.row)" class="addGoodButton">编辑
                      </el-button>
                      <el-button type="danger" @click="delFoodById(scope.row)" class="addGoodButton">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-drawer>
              <el-form-item>
                <el-button @click="addOrUpdateHandle(props.row.businessId)">{{ $t('update') }}</el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="delBusinessById(props.row.businessId)">删除</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="商家列表"
            prop="businessName">
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </template>
    <!-- 修改商品信息-->
    <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="good">
        <el-form-item label="商品名称" :label-width="formLabelWidth" >
          <el-input v-model="good.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" :label-width="formLabelWidth">
          <el-select v-model="value">
            <el-option
                v-for="item in this.categoryList"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="good.goods_description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="更新图片" :label-width="formLabelWidth">
          <el-upload
              class="upload-demo"
              action="/file/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="conUpdate()">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
        title="修改商品"
        :visible.sync="goodDrawer"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="good">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="good.goods_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" :label-width="formLabelWidth">
            <el-select v-model="value">
              <el-option
                  v-for="item in this.categoryList"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品描述" :label-width="formLabelWidth">
            <el-input v-model="good.goods_description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="更新图片" :label-width="formLabelWidth">
            <el-upload
                class="upload-demo"
                action="/file/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :file-list="fileList"
                list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button type="primary" @click="addGood()" class="conAddGoodButton">确定</el-button>
        </div>
      </div>
    </el-drawer>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './business-add-or-update'

export default {
  mixins: [mixinViewModule],
  created() {
    this.listBusiness()
    this.listCategory()
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/business/business/page',
        getDataListIsPage: true,
        exportURL: '/business/business/export',
        deleteURL: '/business/business',
        deleteIsBatch: true
      },
      businessList: [],
      table: false, //查看食品列表抽屉
      goodDrawer: false, // 修改食品信息抽屉
      goodDialog: false, //添加商品对话框
      goodData: [],
      categoryList: [],
      businessPicUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      goodPicUrl: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      templateData: [],

      good: {
        goods_id: 0,
        goods_name: '',
        category_pid: 0,
        goods_description: '',
        goods_pic: '',
      },

      formLabelWidth: '100px',
      value:'',
      businessId: 0,
      businessName: '',
      fileList: [],
      dataForm: {},
      // 分页信息
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    /**
     * 获取商家列表（分页）
     */
    listBusiness() {
      this.templateData = []
      this.businessList = []
      this.$http.get('business/business/listAll', {params: this.pageInfo}).then(({data: res}) => {
        this.loading = false
        this.businessList = res.data
        this.templateData = res.data
      }).catch(() => {
      })

    },
    /**
     * 获取商家商品列表
     * @param index
     */
    goodsList(index) {
      this.businessId = index
      this.table = true
      this.$http.get('goobs/goods/listBusinessId', {params: {id: index}}).then(({data: res}) => {
        this.goodData = res.data
      }).catch(() => {
      })
    },
    /**
     *更新商品信息
     * @param index
     */
    updateGood(index) {
      console.log(index)
      console.log(index.goodsId)
      this.good.goods_name = index.goodsName
      this.good.goods_description =index.goodsDescription
      this.value=index.categoryPid
      this.good.goods_pic=index.goodsPic
      this.dialogFormVisible = true
      this.goods_id = index.goodsId
      this.businessId = index.businessId
    },
    /**
     * 获取 商品分类
     */
    listCategory() {
      this.$http.get('goodsCategory/goodscategory/listAll', {}).then(({data: res}) => {
        this.categoryList = res.data
      }).catch(() => {
      })
    },
    /**
     * 确认修改
     */
    conUpdate() {
      console.log(this.good.goods_name)
      console.log(this.goods_id)
      this.dialogFormVisible = false
      this.good.category_pid = this.value
      this.$http.put('goobs/goods/updateGoodById', {
        goodsId: this.goods_id,
        goodsName: this.good.goods_name,
        categoryPid: this.good.category_pid,
        goodsDescription: this.good.goods_description,
        goodsPic: this.goodPicUrl
      }).then(({data: res}) => {
        this.good = {}
        if (res.data == 1) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.goodsList(this.businessId);
        }
      }).catch(() => {
      })
    },
    /**
     * // 删除图片
     * @param file
     */
    handleRemove(file) {
      this.$http
          .delete("/file", {
            params: {
              fileInfo: file.response.data,
            },
          })
          .then(({data: res}) => {
            this.$message({
              message: `${res.data}`,
              type: "success",
            });
          });
    },
    /**
     * 点击图片
     * @param file
     */
    handlePreview(file) {
      console.log(file);
    },
    /**
     * 上传图片成功后
     * @param response
     */
    handleSuccess(response) {
      this.goodPicUrl = response.data
    },
    /**
     * 取消修改
     */
    cancel() {
      this.dialogFormVisible = false
      this.goodsList(this.businessId);
    },
    /**
     * 根据id 删除商家
     * @param id
     */
    delBusinessById(id) {
      this.$confirm('确认删除该商家？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('business/business/businessDelete', {params: {id: id}}).then(({data: res}) => {
          this.listBusiness();
        }).catch(() => {
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    /**
     * 模糊查询
     */
    getBusinessLikeName() {
      this.$http.get('business/business/getBusinessLikeName', {params: {businessName: this.businessName}})
          .then(({data: res}) => {
        this.templateData = res.data
        this.businessList = res.data
      })
    },
    /**
     * 根据食品ID 删除食品
     * @param id
     */
    delFoodById(id) {
      this.$confirm('确认删除该食品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('goobs/goods/delGoodById', {params: {id: id.goodsId}}).then(({data: res}) => {
          this.good = {}
          if (res.data == 1) {
            this.goodsList(id.businessId);
          }
        }).catch(() => {
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 添加食品
     */
    addGood() {
      this.good.category_pid = this.value
      this.$http.post('goobs/goods/insertGood', {
        goodsId: this.good.goods_id,
        goodsName: this.good.goods_name,
        categoryPid: this.good.category_pid,
        goodsDescription: this.good.goods_description,
        goodsPic: this.goodPicUrl,
        businessId: this.businessId
      }).then(({data: res}) => {
        this.good = {}
        if (res.data == 1) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.goodsList(this.businessId);
        }
      }).catch(() => {
      })
    },
    /**
     * 分页大小
     * @param val
     */
    handleSizeChange(val) {
      this.loading = true
      this.pageInfo.pageSize = val;
      this.listBusiness();
    },
    /**
     * 当前页
     * @param val
     */
    handleCurrentChange(val) {
      this.loading = true
      this.pageInfo.currentPage = val;

      this.listBusiness();
    },
  },

  /**
   * 监听器
   */
  watch: {
    businessName: function () {
      if (this.businessName === '') {
        console.log(this.businessName)
        this.businessList = this.templateData
        this.listBusiness()
      } else {
        this.businessList = []
        this.getBusinessLikeName()
        for (let item of this.templateData) {
          if (item.businessName.includes(this.businessName)) {
            this.businessList.push(item)
          }
        }
      }
    }
  }
  ,
  components: {
    AddOrUpdate
  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.addGoodButton {
  padding: 10px;
}

.conAddGoodButton {
  width: 300px;
  margin-left: 120px;
}
</style>
